<template>
  <div class="page">
    <div class="margin-bottom-sm text-sm">
      <mt-cell title="九方子单号：">
        <mt-field
          ref="ref_1"
          placeholder="支持九方子单号/运单号混合查找"
          v-model="subWaybillNo"
          @keyup.enter.native="findOrderNo"
        ></mt-field>
      </mt-cell>
      <mt-cell title="FBA箱号：">
        <mt-field
          placeholder="请录入FBA箱号"
          ref="ref_2"
          v-model="fbaNo"
          @keyup.enter.native="findOrderNo"
        ></mt-field>
        <mt-button style="font-size:12px" size="small" type="primary" @click="findOrderNo"
          >查询</mt-button
        >
      </mt-cell>
    </div>

    <div class="flex margin-bottom-sm">
      <div class="flex-sub">
        <div class="showNum text-lg">{{ hasCount }}</div>
      </div>
      <div class="flex-twice text-lg flex justify-center flex-direction">
        <div>运单号：{{ waybillNo }}</div>
        <div>应扫描数：{{ count }}</div>
        <div>剩余数：{{ remainCount }}</div>
      </div>
    </div>

    <!-- <div>
      <mt-cell title="运单号：" :value="waybillNo"></mt-cell>
      <mt-cell title="渠道名称：" :value="customerChannelName"></mt-cell>
      <mt-cell title="国家：" :value="countryName"></mt-cell>
      <mt-cell title="客户简称：" :value="customerNameShort"></mt-cell>
      <mt-cell title="客户代码：" :value="customerCode"></mt-cell>
    </div> -->

    <div style="font-size: 15px" >
      <mt-cell title="未扫描运单列表：" ></mt-cell>
      <template v-for="(item, index) in noScanList">
        <template v-if="index%2 ==1">
          <th :key="index">{{ item }}</th></br>
        </template>
        <template v-else>
          <th :key="index" style="padding-right: 100px;padding-left: 30px;">{{ item }}</th>
        </template>
      </template>
    </div>

    <el-card style="margin-top: 20px">
      <el-table :data="subWaybills" style="width: 100%">
        <el-table-column prop="subWaybillNo" label="已扫子单号">
        </el-table-column>
        <el-table-column prop="hsubNumber" label="已扫FBA号"> </el-table-column>
      </el-table>
    </el-card>

    <div class="foot padding-lr-sm flex align-center justify-between">
      <mt-button type="primary" @click="saveRelevanceFbaNo">保存</mt-button>
      <mt-button type="primary" @click="withdraw">撤回</mt-button>
    </div>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";
import { Toast } from "mint-ui";
// import VConsole from "vconsole";
// new VConsole();
export default {
  components: {},
  props: [],
  data() {
    return {
      subWaybills: [
        // {
        //   subWaybillNo: "",
        //   hsubNumber: ""
        // }
      ],
      subwaybill: {
        subWaybillNo: "",
        hsubNumber: ""
      },
      disable1: true,
      waybillNos: "",
      subWaybillNo: "",
      fbaNo: "",
      remainCount: "",
      orderCount: "",
      waybillNo: "",
      customerChannelName: "",
      countryName: "",
      customerNameShort: "",
      customerCode: "",
      cursubNo: 1,
      count: 0,
      waybillId: "",
      hasCount: "",
      sonNumber: [],
      curBox: "",
      acturlCount: "",
      boxMap: {},
      noScanList: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$refs.ref_1.$refs.input.focus();
  },
  methods: {
    findOrderNo() {
      if (
        0 == this.fbaNo.length &&
        0 < this.subWaybillNo.length &&
        this.disable1
      ) {
        this.disable1 = false;
        if (this.subWaybills.length == 0 ||
          this.subWaybills[this.subWaybills.length - 1].hsubNumber) {
          this.searchSubWaybillNo();
        }
      }
      if ("" != this.waybillNo && 0 < this.fbaNo.length) {
        if (!this.subWaybills[this.subWaybills.length - 1].hsubNumber) {
          this.disable1 = true;
          this.showFbaNumber(this.fbaNo);
        }
      }
    },
    showFbaNumber(fbaNoVal) {
      if (!fbaNoVal) {
        Toast("请输入FBA箱号！");
        return false;
      }
      if (!this.curBox) {
        Toast("请先扫描九方箱号！");
        return false;
      }
      if (this.curBox > this.count) {
        Toast("非法的九方箱号！");
        return false;
      }
      // var has = this.curBox in this.boxMap;
      if (!this.boxMap[this.curBox]) {
        this.boxMap[this.curBox] = fbaNoVal;
      }
      this.remainCount = parseInt(this.count) - parseInt(this.acturlCount); //剩余件数
      this.subwaybill.hsubNumber = this.fbaNo;
      this.subWaybills.pop();
      this.subWaybills.push(this.subwaybill);
      console.log(this.subWaybills);
      this.subWaybillNo = "";
      this.fbaNo = "";
      this.hasCount = this.sonNumber.length;
      this.$refs.ref_1.$refs.input.focus();
    },
    searchSubWaybillNo() {
      var subNoVal = this.subWaybillNo;
      if (0 == subNoVal.length || -1 == subNoVal.indexOf("-")) {
        Toast("请输入九方子单号或运单号查找！");
        return false;
      }
      if (this.sonNumber.length === 0) {
        ajax(
          "searchSubWaybillNo",
          { subNoVal: subNoVal },
          { type: "mobile" }
        ).then(
          res => {
            if (res.code == 200) {
              var data = res.data;
              var subNo = data.subNo;
              this.sonNumber.push(subNo);
              this.curBox = subNo;
              this.count = data.count; //应扫描数
              var waybill = data.waybill;
              this.waybillId = waybill.id;
              this.hasCount = 0;
              this.remainCount = data.count;
              this.acturlCount = this.sonNumber.length; //实际件数
              this.remainCount =
                parseInt(this.count) - parseInt(this.acturlCount); //剩余件数

              this.waybillNo = waybill.waybillNo; // 运单号
              this.customerChannelName = data.customerChannelName; // 渠道名称
              this.countryName = data.countryName; // 国家
              this.customerNameShort = data.customerNameShort; // 客户简称
              this.customerCode = data.customerCode; // 客户代码
              this.subWaybills = [];
              this.subwaybill = {};
              this.subwaybill.subWaybillNo = data.subNoVal;
              this.subWaybills.push(this.subwaybill);
              this.$refs.ref_2.$refs.input.focus();
              this.subWaybillNo = "";
              this.fbaNo = "";
              for (var subwaybill of data.subWaybills) {
                var subWaybillNo = subwaybill.subWaybillNo;
                if (subWaybillNo!=subNo){
                  this.noScanList.push(this.waybillNo +"-"+subWaybillNo);
                }
              }
            } else {
              Toast("操作失败"+res.message);
              this.disable1 = true;
              this.$refs.ref_1.$refs.input.focus();
            }
          },
          error => {
            console.log(error);
            this.disable1 = true;
            this.$router.push('/login');
          }
        );
      } else {
        var indexNo = this.noScanList.indexOf(subNoVal);
        if (indexNo!=-1){
          this.noScanList.splice(indexNo, 1);//存在即删除
        }
        const no = subNoVal.substr(0, subNoVal.indexOf("-"));
        if (no == this.waybillNo) {
          const subNo = subNoVal.substr(
            subNoVal.indexOf("-") + 1,
            subNoVal.length
          );
          if (
            subNo == "" ||
            isNaN(subNo) ||
            Number(subNo) <= 0 ||
            Number(subNo) > this.count
          ) {
            Toast("子单号错误！");
            this.subWaybillNo = "";
            this.$refs.ref_1.$refs.input.focus();
            return false;
          }
          if (this.sonNumber.includes(subNo)) {
            Toast("当前货箱已经扫描");
            this.subWaybillNo = "";
            this.$refs.ref_1.$refs.input.focus();
            this.disable1 = true;
          } else {
            this.sonNumber.push(subNo);
            this.acturlCount = this.sonNumber.length;
            this.remainCount =
              parseInt(this.count) - parseInt(this.acturlCount);
            this.hasCount = this.acturlCount;
            this.curBox = subNo;
            if (this.subWaybills) {
              this.subwaybill = {};
              this.subwaybill["subWaybillNo"] = subNoVal;
              this.subWaybills.push(this.subwaybill);
            }
            this.subWaybillNo = "";
            this.fbaNo = "";
            this.$refs.ref_2.$refs.input.focus();
          }
        } else {
          Toast("一次只能扫描一个运单的数据");
          this.subWaybillNo = "";
          this.$refs.ref_1.$refs.input.focus();
          this.disable1 = true;
        }
      }
    },
    withdraw() {
      if (this.subWaybills[this.subWaybills.length - 1].hsubNumber) {
        if (this.remainCount + this.hasCount == this.count) {
          this.remainCount = ++this.remainCount;
        }
        this.hasCount = --this.hasCount;
        this.$delete(
          this.subWaybills[this.subWaybills.length - 1],
          "hsubNumber"
        );
        this.$refs.ref_2.$refs.input.focus();
      }
    },
    saveRelevanceFbaNo() {
      if (!this.waybillId) {
        Toast("请先录入数据");
        this.subWaybillNo.focus();
        return false;
      }
      if (this.count != this.hasCount) {
        Toast("已扫件数不等于应扫描件数");
        this.subWaybillNo.focus();
        return false;
      }
      var has = this.waybillId in this.boxMap;
      if (!has) {
        this.boxMap["waybillId"] = this.waybillId;
      }
      const fbaNoStr = JSON.stringify(this.boxMap);
      ajax(
        "saveRelevanceFbaNo",
        { fbaNoStr: fbaNoStr },
        { type: "mobile" }
      ).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            Toast({
              message: "保存成功",
              iconClass: "icon icon-success"
            });
            this.timeout = setTimeout(() => {
              window.location.reload(true);
            }, 1000 * Math.random());
          }else{
            Toast("操作失败"+res.message);
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  }
};
</script>
<style scoped>
.page >>> .mint-cell-value {
  flex: 2;
}

.page >>> .el-table th {
  font-size: 16px;
}
/deep/ .mint-button--small{
  padding: 0 8px;
}
</style>

<style lang="scss" scoped>
.page {
  padding-bottom: 50px;

  .showNum {
    border: 2px solid red;
    width: 2.5em;
    height: 2.5em;
    margin: 0 auto;
    line-height: 2.5em;
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    color: red;
    font-size: 24px;
  }

  .foot {
    background: rgba(40, 44, 48, 1);
    padding: 4px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
